<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h2>{{count}}</h2>
        <button @click='fn'></button>
        <button @click='add()'>+</button>
        <button @click.once='minus'>-</button>

        <!--  在函数名的后边加上（） 不是执行 只是传参 -->
        <button @click='add(10,$event)'>+10</button>
        <button @click='minus($event,-10)'>-10</button>

        <a href="http://baidu.com" @click.prevent='fn2'>百度</a>

        <div class="outer" @click='add'>
          outer
          <div class="inner" @click='fn2'>
            inner
          </div>
        </div>
        <!-- 
          在事件中 先执行默认行为还是先执行绑定的函数？？？？ 
          在大部分事件中 先执行函数 在执行默认
          onscroll  touchmove .. 这类高频出发的事件 是先执行的默认 
        -->


        <input type="text" v-model='name' @keydown.enter='fn3'>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  /* 
    v-on  @click='fn'
    // 事件中 会默认 把事件对象传给对应的函数
    @click='fn'    这种情况 默认会把事件对象传过去
    @click='fn()'  这种情况是 一个参数都没有
    @click='fn(10,20,30)' 这种情况 写什么参数 就传递什么参数
    @click='fn(10,20,$event,30,$event)'  若既需要自己的，也需要事件对象 则编写 $event这个字符
   
    事件修饰符
    @click.prevent='fn2'  会阻止默认事件
    @click.stop = 'fn2'   会组件冒泡传播

    按键修饰符  @keydown.enter='fn3' 在敲回车的时候 才会触发这个函数
   
   */
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            count:0
        },
        methods: {
          add(n){
            
            if(typeof n == 'object'){
              this.count ++ 
            }else{
              this.count += n
            }
            console.log(arguments)
            // this.count++
          },
          minus(){
            this.count--
          },
          fn(){
            // this 是当前实例
            console.log(arguments)
            this.fn2()
          },
          fn2(e){
            // e.preventDefault();
            // e.stopPropagation();
            
          },
          fn3(e){
            console.log(e)
          }
        },
    });
</script>